<template>
  <h3>vue-vuecmf-editor demo</h3>

  <vuecmf-editor
      id="myeditor"
      size="default"
      :content="contentHtml"
      @on-change="getContent"
      :token="token"
      :params="params"
      upload="http://www.vuecmf.com/vuecmf/upload"
      openai="http://localhost:8080/seo/ai/make"
      aimodel="http://localhost:8080/seo/ai/get_model_list"
      :upload_action="uploadAction"
      amap_key="高德地图申请的应用KEY"
  ></vuecmf-editor>
  <button @click="save">保存</button>

  <div style="margin-top: 20px">
    <button @click="winDlg = true">在弹窗中嵌入编辑器</button>
  </div>


  <el-dialog v-model="winDlg" title="添加文章">
    <el-form>
      <el-form-item label="标题">
        <el-input  />
      </el-form-item>
      <el-form-item label="内容">
        <vuecmf-editor
            id="myeditor2"
            size="default"
            :content="contentHtml"
            @on-change="getContent"
            :token="token"
            :params="params"
            upload="http://www.vuecmf.com/vuecmf/upload"
            openai="http://localhost:8080/seo/ai/make"
            aimodel="http://localhost:8080/seo/ai/get_model_list"
            :upload_action="uploadAction"
            amap_key="高德地图申请的应用KEY"
        ></vuecmf-editor>
      </el-form-item>
    </el-form>
  </el-dialog>



  <el-dialog
      v-model="dialogVisible"
      title="上传文件"
      width="50%"
  >
    <span>此处可以自定义上传组件或接入外部文件管理器组件，如<a href="https://github.com/vuecmf/vue-vuecmf-fileexplorer" target="_blank">vue-vuecmf-fileexplorer</a> </span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveFile">确定</el-button>
      </span>
    </template>
  </el-dialog>

</template>


<script lang="ts">
import {defineComponent, ref} from 'vue';

export default defineComponent({
  name: 'App',
  components: {
  },
  setup(){
    const contentHtml = ref('Hello world!')
    const token = ref('')
    const params = ref('')

    const getContent = (content:string, id: string) => {
      console.log('id=', id)
      contentHtml.value = content
    }

    const save = ():void => {
      alert(contentHtml.value)
    }

    token.value = 'ed2499f7c4c88084da7fc8c199fb0964'
    params.value = '{"field_name":"pic"}'

    const dialogVisible = ref(false) //上传弹窗
    const fileObj = ref()

    //uploadAction为函数时，则调用的自定义上传表单，否则为默认上传表单
    const uploadAction = null
    /*const uploadAction = (fileInfo: any, from: string):void => {
      fileObj.value = fileInfo
      dialogVisible.value = true
      console.log(fileInfo, from)
    }*/

    //保存文件信息，如可将文件管理器中选择的文件信息保存
    const saveFile = ():void => {
      fileObj.value.url = 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/300'
      dialogVisible.value = false
    }

    const winDlg = ref(false)

    return {
      getContent,
      contentHtml,
      save,
      token,
      params,

      dialogVisible,
      uploadAction,
      saveFile,
      winDlg
    }

  }
});
</script>


